<template>
	<!-- 添加虚拟设备 -->
	<div class="page">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">设备管理</span>　|　<span>添加虚拟设备</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<el-form :model="form" block id="addform" ref="form">
			<el-form-item required label="项目名称:" :label-width="formLabelWidth">
				<el-select v-model="form.product_id" placeholder="选择项目" class="inpu" @change="getDevice(form.product_id)">
					<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select><br>
				<!-- <el-cascader
					class="inpu"
					v-model="form.product_id"
					:options="products"
					:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}">
				</el-cascader><br> -->
				<span class="tip">如果没有选择项，请先添加项目，否则设备无法添加！</span>
				<!-- <el-input v-model="form.name" auto-complete="off" class="inpu" style="transform: translateX(-0.8rem);" placeholder="输入项目名称"></el-input> -->
			</el-form-item>
			<el-form-item label="设备名称:" class="formline" required :label-width="formLabelWidth">
				<el-input v-model="form.equip_name" auto-complete="off" autofocus class="inpu" placeholder="请输入设备名称" spellcheck="false"></el-input><br>
				<!-- <span class="tip">名称必须是中，英文字母，数字，下划线或者破折号的组合</span> -->
			</el-form-item>
			<el-form-item label="计算周期:" class="formline" :label-width="formLabelWidth">
				<el-input v-model="form.report_interval" auto-complete="off" class="inpu" type="number" step="5" min="10" style="width:2.5rem;" spellcheck="false" @change="changeInterval(form.report_interval)"></el-input> s<br>
			</el-form-item>
			<el-form-item label="设备排序:" class="formline" :label-width="formLabelWidth">
				<el-input v-model="form.list_order" auto-complete="off" class="inpu" style="width:2.5rem;" spellcheck="false"></el-input><br>
			    <span class="tip">请输入自然数(0,1,2,3,...),默认以添加的先后顺序排序</span>
			</el-form-item>
			<el-form-item class="formline" label="启用状态:" :label-width="formLabelWidth" style="margin-top:-0.4rem;">
				<el-switch style="display:inline-block;vertical-align:top;" v-model="form.equip_state" :width="stateWidth" class="demo"
				 active-color="#13ce66" inactive-color="#ccc" active-text="启用" inactive-text="禁用" :active-value="one"
				 :inactive-value="zero">
				</el-switch>
			</el-form-item>
			<el-form-item style="margin-left:0.7rem;">
				<el-button type="success" @click="addDevice" size="small" >保存</el-button>
				<!-- <el-button type="primary" @click="resetForm" size="small" >重置</el-button> -->
			</el-form-item>	
		</el-form>
	</div>
</template>

<script>
    export default {
        name: 'addDevice',
        data() {
            return {
                //grade: localStorage.getItem("grade"),
				products:[],
				one: 1,
                zero: 0,
                value: '',
                formLabelWidth2: '80px',
                formLabelWidth: '110px',
                stateWidth: 66,
				form: {
                    product_id:'',
                    // slave_type:1,
					report_interval: 60,
                    list_order: 50,
                    equip_name: '',
                    equip_code: '',
                    type: 3,
					version: 2,
                    equip_state: 1
                },
				versions: [{
                    value: 1,
                    label: 'V1'
                }, {
                    value: 2,
                    label: 'V5'
                }],
				options: []
			}
        },
        created() {
			this.getProduct();
        },
       
        methods: {
			getProduct(){
				var that=this;
				this.$http({
					method: 'post',
					url: '/api/product/tree',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.products=res.data.data;
						this.form.product_id=res.data.data[0].value;
					}
					//console.log("charu")
				}).catch(error => {
					
					console.log(error);
				});
			},
			
		    goBack() {
                this.$router.go(-1);
            },
           
		    changeInterval(val){
				if(val<10){
					this.form.report_interval=10;
				}
			},
			
			addDevice() {
                var that = this;
				this.$http({
                    method: 'post',
                    url: 'api/equip/add',
                    data:this.form
                }).then(res => {
                    if (res && res.data.result == "success") {
                        this.$message({
                            message: '恭喜,添加设备成功!',
                            type: 'success',
                            center: true
                        });
                        this.$router.go(-1);
                    }
                }).catch(error => {
                    console.log(error);

                });
            }
        }
    }
</script>

<style scoped>
	.inpu /deep/ .el-input__inner{
		padding-left:4px;
		padding-right:2px;
	}
    
	#addform {
        position: relative;
        float: left;
        text-align: left;
        margin-top: 0.3rem;
        width: 34%;
        /* height: 12.4rem; */
        /* border:1px solid red; */
        line-height: 0.6rem;
        z-index: 10;
    }
    
    .inpu {
        width: 5.5rem;
    }
    
    .tip{
        display: inline-block;
        color: #FF5722;
        font-size: 0.25rem;
        line-height: 0.35rem;
        transform: translateY(-0.1rem);
    }
    
    .formline {
        /* border:1px solid red; */
        width: 100%;
        margin-top: -0.3rem;
    }
    
</style>